<template>
    <div ref="tooltipRef" class="sea-popper hidden">
        <slot></slot>
    </div>
</template>

<script setup lang="ts">
import {onMounted, onUnmounted, ref, watch} from "vue";
import {Popper} from "../use/use-floating"
import {ComputePositionConfig, flip, offset, Placement} from "@floating-ui/dom";

/**
 * 气泡弹窗
 *
 * 场景：
 * - 窗口内容不变，但是依附组件会发生变化的情况下使用
 * - 当前针对大型窗口设计，对于 tips 窗口，当前设计显得过重
 */
interface Props {
    // 需要吸附的组件
    reference?: HTMLElement;
    // 窗口位置
    placement?: Placement;
    // 窗口偏移量，一般无需调整，eg：10
    offset?: number;
}

// 使用 withDefaults 设置默认值
const props = withDefaults(defineProps<Props>(), {placement: 'bottom-start', offset: 10})

// reference
const tooltipRef = ref();

// popover-options
const option: Partial<ComputePositionConfig> = {
    placement: props.placement,
    middleware: [
        offset(props.offset),
        flip(),
    ]
}

const popper: Popper = new Popper();
popper.options = option;

// 依附组件发生变化的时候，重新绑定组件之间的关系
watch(() => props.reference, (val) => {
    popper.reference = val;
    popper.create();
})

onMounted(() => {
    popper.popover = tooltipRef.value;
    popper.withStyle();
    window.addEventListener('click', popper.windowsEvent);
})

onUnmounted(() => {
    window.removeEventListener('click',  popper.windowsEvent);
})
</script>
